<template>
  <div>
    <div class="flex" ref="radioGroup">
      <div>
        <input type="radio" style="margin: 0 5px;" name="radio0" value="audio"></input>
        <span>audio</span>
      </div>
      <div>
        <input type="radio" style="margin: 0 5px;" name="radio0" value="image"></input>
        <span>image</span>
      </div>
      <div>
        <input type="radio" style="margin: 0 5px;" name="radio0" value="video"></input>
        <span>video</span>
      </div>
      <div>
        <input type="radio" style="margin: 0 5px;" name="radio0" value="upload"></input>
        <span>upload</span>
      </div>
    </div>
    <div class="" ref="cloneRadioGroup">

    </div>
    <el-button @click="handleClone">克隆</el-button>
  </div>
</template>

<script setup lang="ts">
const radioGroup = ref()
const cloneRadioGroup = ref()
function handleClone() {
  const cloneNode = radioGroup.value.cloneNode(true)
  const radioList =  cloneNode.querySelectorAll('input[type="radio"]')
  Array.from(radioList).forEach((radio: any) => {
    radio.name+='_clone'
  })
  cloneRadioGroup.value.append(cloneNode)
}

</script>

<style lang="scss" scoped>

</style>